<template>
  <div class="in-master-print" ref="print">
    <div class="print-mid">
      <div class="mid-l">
        <h3>{{ title }}</h3>
        <h2>{{ printData.workTypeTran }}</h2>
        <p>
          <label>单据编码：</label>
          <span>{{ printData.mpCode }}</span>
        </p>
        <p>
          <label>单据日期：</label>
          <span>{{ printData.invoiceDate }}</span>
        </p>
        <p>
          <label>单据状态：</label>
          <span>{{ printData.invoiceStatus | getInvoice }}</span>
        </p>
        <p>
          <label>审核日期：</label>
          <span>{{ printData.checkDate }}</span>
        </p>
      </div>
      <div class="mid-m">
        <p>
          <label>用料方式：</label>
          <span>{{ printData.supplyType }}</span>
        </p>
        <p>
          <label>采购部门：</label>
          <span>{{ printData.workDept }}</span>
        </p>
        <p>
          <label>采购员：</label>
          <span>{{ printData.workStaff }}</span>
        </p>

        <p>
          <label>备注：</label>
          <span>{{ printData.remarks }}</span>
        </p>
      </div>

      <div class="mid-r">
        <vue-qr
          :logoScale="20"
          :text="qrCodeValue"
          :margin="0"
          :dotScale="1"
        ></vue-qr>
      </div>
    </div>
    <table cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th>序号</th>
          <th>物料编码</th>
          <th>物料名称</th>
          <th>型号规格</th>
          <th>主计量</th>
          <th>库存数量</th>
          <th>采购数量</th>
          <th>已订数量</th>

          <th>采购说明</th>
        </tr>
      </thead>
      <tbody v-if="printData.poPlanSalveList.length > 0">
        <tr v-for="(item, id) in printData.poPlanSalveList" :key="id">
          <td>{{ item.id }}</td>
          <td>{{ item.invCode }}</td>
          <td>{{ item.invName }}</td>
          <td>{{ item.invAttribute }}</td>
          <td>{{ item.unitName }}</td>
          <td>{{ item.wmQuantity }}</td>
          <td>{{ item.quantity }}</td>
          <td>{{ item.woQuantity }}</td>
          <td>{{ item.remarks }}</td>
        </tr>
      </tbody>
    </table>
    <div class="print-bot">
      <div class="bot-l">
        <label>制单人：</label>
        <span>{{ printData.userOper }}</span>
      </div>
      <div class="bot-m">
        <label>审核人：</label>
        <span>{{ printData.userCheck }}</span>
      </div>
      <div class="bot-r">
        <label>打印日期：</label>
        <span>{{ printData.printTime }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import vueQr from 'vue-qr'
  export default {
    data() {
      return {

      }
    },
    props: {
      // 打印数据
      printData: {
        type: Object,
        default () {
          return {}
        }
      },
      // 标题
      title: {
        type: String,
        default () {
          return "入库单"
        }
      },
      priceStatus: {
        type: Boolean,
        default: false
      },
      
    // 二维码内容
     qrCodeValue:{
       type: String,
       default () {
         return ""
       }
     },
    },
    components: {
        vueQr
    },
    filters: {
      getInvoice(status) {
        switch (status) {
          case '0':
            return "开立"
            break;
          case '1':
            return "审核"
            break;
          case '2':
            return "退回"
            break;
          default:
            return "无"
        }
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
@media print {
  .in-master-print {
    display: block !important;
  }

  .print-mid {
    height: 160px;
  }
}

.in-master-print {
  label {
    font-weight: normal;
  }

  display: none;

  .print-top {
    position: relative;
    height: 40px;
    line-height: 40px;

    p {
      position: absolute;
      left: 15px;
      margin: 0;
    }

    h2 {
      text-align: center;
    }
  }

  .print-mid {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    position: relative;
    height: 160px;

    p,
    h2,
    h3 {
      margin: 0px 0 10px 0;
      padding: 0;
    }

    .mid-l {
      left: 0;

      h3 {
        font-size: 18px;
        color: #606266;
      }
    }

    .mid-m {
      margin-top: 43px;
    }

    .mid-r {
      right: 0;
      // img{
      //   display: block;
      //   margin-top: 48px;
      // }
    }
  }

  .print-bot {
    position: relative;
    text-align: center;

    .bot-m {
      display: inline-block;
    }

    .bot-l,
    .bot-r {
      position: absolute;
      top: 0;
    }

    .bot-l {
      left: 0px;
    }

    .bot-r {
      right: 0px;
    }
  }

  table {
    width: 100%;
    margin-bottom: 20px;
    border-left: 1px solid #ccc;

    th {
      text-align: center;
      font-size: 14px;
      padding: 5px;
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      border-top: 1px solid #ccc;
    }

    td {
      text-align: center;
      font-size: 13px;
      color: #606266;
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      padding: 5px;
    }
  }
}
</style>
